<template>
	<view class="lease">
		<!-- 选项卡 -->
		<view class="tabs-wrap">
			<com-tabs gap="26rpx" padding="0 12rpx" :tabs="tabs" :active="params.order_status"
				@change="changeTab"></com-tabs>
		</view>

		<view class="lists">
			<block v-if="lists.length">
				<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goDetails(item)">
					<view class="title">
						{{item.product_title}}
						<view v-if="item.product_is_sn" class="info-item">SN：{{item.product_sn}}</view>
					</view>
					<view class="info-list">
						<view class="info-item">租赁方式：
							<view class="status">
								<view v-if="info.is_direct === 0" class="status-item status-wait">向服务商租赁</view>
								<view v-else class="status-item status-wait">向贝贝享飞平台租赁</view>
							</view>
						</view>
						<view class="info-item">订单编号：{{item.order_no}}</view>
						<view class="info-item">客户名称：{{item.u_real_name}}</view>
						<view class="info-item">客户电话：{{item.u_phone}}</view>
						<view class="info-item">租赁日期：{{item.start_rent_date}}至{{ item.end_rent_date }}</view>
						<view class="info-item">租赁日数：{{item.rent_day}}天</view>
						<view class="info-item">订单总金额：{{item.pay_total_fee | formatPrice($formatPrice)}}元</view>
						<view v-if="item.pay_no" class="info-item">支付编号：{{item.pay_no}}</view>
						<view v-if="item.order_status === 2" class="info-item">待支付金额：{{item.unpaid_fee | formatPrice($formatPrice)}}元</view>
						<view class="info-item">订单状态：
							<view class="tags">
								<!--  0全部/2待付款/3待确认/4待发货/5待取货/6租赁中/7待归还/1已完成/-1已取消 -->
								<view v-if="item.order_status === -1" class="tag-item ">已取消</view>
								<view v-if="item.order_status === 1" class="tag-item tag-success">已完成</view>
								<view v-if="item.order_status === 2" class="tag-item tag-wait">待付款</view>
								<view v-if="item.order_status === 3" class="tag-item tag-wait">租赁日期待确认</view>
								<view v-if="item.order_status === 31" class="tag-item tag-wait">租赁地址待确认</view>
								<view v-if="item.order_status === 4" class="tag-item tag-wait">待发货</view>
								<view v-if="item.order_status === 5" class="tag-item tag-wait">待取货</view>
								<view v-if="item.order_status === 6" class="tag-item tag-wait">租赁中</view>
								<view v-if="item.order_status === 7" class="tag-item tag-wait">待归还</view>
								<view v-if="item.order_status === 8" class="tag-item tag-wait">待评价</view>
							</view>
						</view>
					</view>

					<!-- <button class="item-btn">立即评价</button> -->
				</view>
			</block>

			<view v-else class="empty">暂无数据</view>
		</view>

		<!-- 授权 -->
		<authorize-popup ref="authorize" @rejects="handleRejects" @success="getData"></authorize-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import formatPrice from '@/mixins/formatPrice.js';
	
	export default {
		mixins:[formatPrice],
		data() {
			return {
				tabs: [],
				lists: [],
				params: {
					page: 1, // 页码
					limit: 10, // 页数
					key: '', // 关键字
					order_status: 0
				},
				loading: true
			};
		},
		computed: {
			...mapState('login', ['token'])
		},
		onLoad(options) {},
		onShow() {
			this.getOrderStatusData()
			if (this.token) {
				this.getData()
				uni.$emit('hide-authorize')
			} else {
				this.$nextTick(() => {
					uni.$emit('show-authorize')
				})
			}
		},
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		onUnload() {
			uni.$off('show-authorize')
			uni.$off('hide-authorize')
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		methods: {
			getOrderStatusData() {
				this.$api.agentUserRentOrderStatusDataApi().then(res => {
					this.tabs = res.data.map(item => ({
						label: item.title,
						value: item.name,
						count: item.count,
						show: item.show,
					}))
					if (!this.params.order_status) {
						this.params.order_status = this.tabs[0].value
					}

				}).catch(err => {
					console.log('err', err);
				})
			},
			// 拒绝登录
			handleRejects() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			changeTab(value) {
				this.params.order_status = value
				this.getData()
			},
			// 前往订单详情
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/agent/lease/details/details?gid='+item.gid
				})
			},
			getData() {
				this.params.page = 1
				this.getList()
			},
			getList() {
				this.loading = true
				const params = {
					...this.params
				}
				// params.order_status = this.params.order_status === 0 ? '' : this.params.order_status
				this.$api.agentUserRentOrderListApi(params).then(res => {
					if (this.params.page === 1) {
						this.lists = []
					}

					if (res.data.length === 0 || res.data.length < this.params.limit) {
						this.more = false
					} else {
						this.more = true
						this.params.page++
					}

					const oldList = [...this.lists]
					this.lists = oldList.concat(res.data)

				}).catch(err => {
					console.log('err', err);
				}).finally(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.lease {
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.tabs-wrap {
			position: sticky;
			top: 0;
			z-index: 999;
			padding: 0 32rpx;
			background-color: #FFFFFF;
		}

		.lists {
			padding: 32rpx 32rpx;

			.list-item {
				padding: 32rpx;
				margin-bottom: 32rpx;
				border-radius: 26rpx;
				background-color: #FFFFFF;
			}

			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}

			.info-list {
				gap: 8rpx;
				display: flex;
				padding-top: 38rpx;
				// padding-bottom: 38rpx;
				flex-direction: column;
			}

			.info-item {
				color: #999999;
				font-size: 26rpx;
				text-align: left;
				font-weight: 400;
				line-height: 36rpx;

				display: flex;
				align-items: center;
			}

			.tags {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}

			.tag-item {
				display: flex;
				align-items: center;
				justify-content: center;

				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				background-color: #868686;

				color: #FFFFFF;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}

			.tag-success {
				background-color: #009D6E;
			}

			.tag-complate {
				background-color: #D4D4D4;
			}

			.tag-wait {
				background-color: #003D99;
			}
			
			.status {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}

			.status-item {
				display: flex;
				align-items: center;
				justify-content: center;

				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				border: 1px solid #868686;

				color: #868686;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}

			.status-success {
				color: #009D6E;
				border: 1px solid #009D6E;
			}

			.status-complate {
				color: #D4D4D4;
				border: 1px solid #D4D4D4;
			}

			.status-wait {
				color: #003D99;
				border: 1px solid #003D99;
			}

			.item-btn {
				padding: 0;
				margin: 0;
				height: 62rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);

				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}

				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
			}
		}
	}
</style>